<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.ac_wrap ul {
			margin: 0;
			padding: 0;
		}

		ul, ol {
		list-style: none;
		}
		.ac_wrap {
			background: #fff;
			box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);
			color: #333;
			font-size: 14px;
			margin-top: 0;
			overflow-y: hidden;
			position: absolute;
			top: 0;
			width: 540px;
			z-index: 100;
		}
		.ac_wrap_inner {
			border: 1px solid #e2e2e2;
		}
		.ac_wrap .bottom-tool {
			border-top: 1px solid #f2f2f2;
			font-size: 12px;
			height: 29px;
			line-height: 29px;
			text-align: right;
		}
		.ac_wrap li {
			color: #333;
			cursor: pointer;
			height: 30px;
			line-height: 30px;
			list-style: none;
			padding: 0 0 0 10px;
			position: relative;
		}
		.ac_wrap #clear_history {
			color: #666;
			font-size: 12px;
			margin-right: 10px;
			text-decoration: none;
		}
		#suggest-align {
			height: 34px;
			padding: 5px 10px;
			position: relative;
			vertical-align: top;
			width: 519px;
		}
		.skin-search-input {
			border: 1px solid #bbb;
		}
		#input {
			background: transparent;
			border: none;
			color: #333;
			float: left;
			font-size: 16px;
			height: 30px;
			line-height: 30px;
			margin-top: 3px;
			outline: none;
			width: 519px;
		}
		#search-button {
			-webkit-appearance: none;
			border: 0;
			border-radius: 0;
			cursor: pointer;
			font-family: "Microsoft YaHei";
			font-size: 18px;
			height: 46px;
			left: 540px;
			letter-spacing: 1px;
			outline: none;
			position: absolute;
			top: 0;
			vertical-align: top;
			width: 100px;
		}
		.skin-search-button {
		background: #19b955;
		color: #fff;
		}
		#input-container {
			position: relative;
			width: 640px;
			z-index: 9;
			margin:200px auto;
		}
	</style>
</head>
<body>
<div id="input-container">
	<div class="ac_wrap" style="min-width: 540px; top: 45px; left: 0px; display: block;">
		<div unselectable="on" class="ac_wrap_inner">
			<div unselectable="on" class="ac_menu_ctn">
				<ul unselectable="on" id="soul" class="ac_menu" ac_word="a" ver="3.2.2">

				</ul>
			</div>
		</div>
	</div>
	<div id="suggest-align" class="skin-search-input">
		<input type="text" name="q" class="placeholder" id="input" suggestwidth="540px" autocomplete="off">
	</div>
	<input type="submit" id="search-button" class="skin-search-button" value="搜索">
</div>
<script src="../jquery/jquery.min.js"></script>
<script src="../template/template-web.js"></script>
<script id="soso" type="text/html">
	{{each result value index}}
	<li >{{value.word}}</li>
	{{/each}}
</script>
<script>
document.querySelector("#input").onkeyup = function(){
	console.log('11');
	let inputVal = this.value;
	var script = document.createElement("script");

	script.src="https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word="+inputVal;
	document.body.appendChild(script);
}


function suggest_so(obj) {
	var soHtml = template("soso",obj);
    $("#soul").html(soHtml);
}

function digital_root(n) {
	// ...
	let arr = n.toString().split("");
	let sum = arr.reduce((a,b)=> a*1+b*1 );
	return sum >=10 ? digital_root(sum) : sum;

}
digital_root(16);
digital_root(166);
</script>
</body>
</html>